<style type="text/css">
    body{
        background: #ffffff;
    }
   table,tr,th,td {
        border: 1px solid #f4f4f4;
   }
   .table {
    padding: 0 6.5%;
    display: flex;
    flex-flow: row;
    align-items: center;

   }
   .table>table {
    width: 100%;
      background-color: #ffffff;
   }
   .table th,.table tr,.table td {
    text-align: center;
   }
   .table th,.table td {
    height: 50px;
   }
   .table th,.table td {
    padding: 10px 0;
   }
   .table td {
    background-color: #ffffff;
    text-align: center;
    position: relative;
   }
   .table td>input {
    margin: 0 auto;
    height: 24px;
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 7px);
   }

</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group table">
        <table border="0">
            <tr>
                <th><input type="checkbox"  name="" value="" class="checkboxs"></th>
                <th>ID</th>
                <th>商品名称</th>
                <th>图片</th>
                <th>销量</th>
                <th>添加时间</th>
            </tr>
            {volist name="all_goods" id="vo"}
                <tr class="trs">
                    <td><input type="checkbox"  name="" value="{$vo.id}" class="checkbox" {if condition="in_array($vo.id, $have_goods)"}checked{else /}{/if}></td>
                    <td style="width: 15%;">{$vo.id}</td>
                    <td style="width: 23%;">{$vo.title|mb_substr=0,15,'utf-8'}...</td>
                    <td style="width: 12%;"><img src="{$vo.image}" style='width: 36%;'></td>
                    <td>{$vo.sales}</td>
                    <td>{$vo.createtime|date = 'Y-m-d H:i:s',###}</td>
                </tr> 
            {/volist}
        </table>
    </div>
    <input type="hidden" name="" id="group_id" value="{$group_id}">
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <div  class="btn btn-success btn-embossed " id="submit">确认</div>
            
        </div>
    </div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    
    window.onload = function (argument) {
        var checkbox = document.getElementsByClassName;
        $('.checkbox').click(function(){
           if ($(this)[0].checked) {
                $(this).parent().siblings().css({
                    'background':'#f5f5f5'
                })
                $(this).parent().css({
                    'background':'#f5f5f5'
                })
           }else{
             $(this).parent().siblings().css({
                    'background':'#ffffff'
                })
             $(this).parent().css({
                    'background':'#ffffff'
                })
           }
        }) 
        $('.checkboxs').click(function(){
            if ($(this)[0].checked) {
                $('.checkbox').prop("checked",true)
                $('.trs').children().css({
                    'background':'#f5f5f5'
                })
            }else{
                 $('.checkbox').prop("checked",false)
                 $('.trs').children().css({
                    'background':'#ffffff'
                })
            }
        })

        $("#submit").click(function(){
            var arr = [];
            $('.checkbox').each(function(){
                if($(this)[0].checked){
                    arr.push($(this).parent().next().text());
                }
            }) 

            console.log(arr);
            var choice = arr.join(",");
            // console.log(choice);
            var group_id = document.getElementById('group_id').value
            // console.log(group_id);
            var url_ = "{:url('activity/group_detail/choice')}";
            $.ajax({
                type:'post',
                url:url_,
                data:{
                    choice:choice,
                    group_id:group_id
                },
                dataType:"json",
                success:function(msg){
                   if(msg.state == 1){
                      layer.msg('更新成功！');
                      setTimeout(function(){
                       sessionStorage.setItem('status',1)
                      },2000);
                   }else if(msg.state == 2){
                      layer.msg('更新失败！');
                   }
                }
            })
        })
    }


</script>

